<template>
    <div style="overflow: hidden;max-width: 100%;">
        <el-row :gutter="10">
            <el-col :md="18" :xs="24" :sm="24">
                <div class="card-container">
                    <el-card shadow="always" body-style="padding-bottom:10px;">
                        <el-row>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor1">
                                    <div class="box">
                                        <div class="box-title">车位总数</div>
                                        <div class="box-number">{{panel[0]}}</div>
                                    </div>
                                    <i class="fa fa-car"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor2">
                                    <div class="box">
                                        <div class="box-title">在场车辆</div>
                                        <div class="box-number">{{panel[1]}}</div>
                                    </div>
                                    <i class="fa fa-tasks"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor3">
                                    <div class="box">
                                        <div class="box-title">临停车辆</div>
                                        <div class="box-number">{{panel[2]}}</div>
                                    </div>
                                    <i class="fa fa-dashcube"></i>
                                </div>
                            </el-col>
                            <el-col :md="6" :sm="12" :xs="12">
                                <div class="style-1 bkcolor4">
                                    <div class="box">
                                        <div class="box-title">月租用户</div>
                                        <div class="box-number">{{panel[3]}}</div>
                                    </div>
                                    <i class="fa fa-database"></i>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
                <div class="card-container">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>临停收益统计</div>
                                <div class="right-filter">
                                    <el-button-group>
                                        <el-button @click="changeLine('month')" size="small" :type="(lineFilter=='month')?'primary':''">按月</el-button>
                                        <el-button @click="changeLine('day')" size="small" :type="(lineFilter=='day')?'primary':''">按天</el-button>
                                        <el-button @click="changeLine('hour')" size="small" :type="(lineFilter=='hour')?'primary':''">按时</el-button>
                                    </el-button-group>
                                </div>
                            </div>
                        </template>
                        <div class="chart1" id="chart1"></div>
                    </el-card>
                </div>
                <div class="card-container">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>出入统计</div>
                                <div class="right-filter">
                                    <el-form :model="filterForm">
                                        <el-form-item label="统计时间" style="margin-bottom: 0;">
                                            <el-select v-model="filterForm.select" style="margin-right: 10px;width: 150px;" @change="parseRecords">
                                                {foreach $ruletype as $k=>$v}
                                                <el-option label="{$v}" value="{$k}"></el-option>
                                                {/foreach}
                                            </el-select>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </div>
                        </template>
                        <div class="chart3" id="chart3"></div>
                    </el-card>
                </div>
                <div class="card-container" v-if="table.length>0">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>月租车</div>
                                <div class="right-filter">
                                    <el-button-group>
                                        <el-button @click="changeMonth('asc')" size="small" :type="(tableFilter=='asc')?'primary':''">顺序</el-button>
                                        <el-button @click="changeMonth('desc')" size="small" :type="(tableFilter=='desc')?'primary':''">倒序</el-button>
                                    </el-button-group>
                                </div>
                            </div>
                        </template>
                        <el-table :data="table">
                            <el-table-column label="排名" prop="sort"></el-table-column>
                            <el-table-column label="车牌号" prop="plates">
                                <template #default="scope">
                                    <el-tag>{{scope.row.plates}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="联系人" prop="contact"></el-table-column>
                            <el-table-column label="手机号" prop="mobile"></el-table-column>
                            <el-table-column label="剩余天数">
                                <template #default="scope">
                                    <el-tag v-if="scope.row.day<0" type="danger">{{scope.row.day}}天</el-tag>
                                    <el-tag v-if="scope.row.day>=0 && scope.row.day<10" type="warning">{{scope.row.day}}天</el-tag>
                                    <el-tag v-if="scope.row.day>=10" type="success">{{scope.row.day}}天</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
                <div class="card-container" v-if="merch.length>0">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>商户</div>
                                <div class="right-filter">
                                    <el-button-group>
                                        <el-button @click="changeMerch('before')" size="small" :type="(merchFilter=='before')?'primary':''">按余额</el-button>
                                        <el-button @click="changeMerch('after')" size="small" :type="(merchFilter=='after')?'primary':''">按欠费</el-button>
                                    </el-button-group>
                                </div>
                            </div>
                        </template>
                        <el-table :data="merch">
                            <el-table-column label="排名" prop="sort"></el-table-column>
                            <el-table-column label="商户" prop="merch_name"></el-table-column>
                            <el-table-column v-if="merchFilter=='before'" label="余额" prop="balance">
                                <template #default="scope">
                                    <el-tag type="success">{{scope.row.balance}}元</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column v-if="merchFilter=='after'" label="欠费" prop="balance">
                                <template #default="scope">
                                    <el-tag type="danger">{{scope.row.balance}}元</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="停车券（未使用）" prop="count0"></el-table-column>
                            <el-table-column label="停车券（使用中）" prop="count2"></el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-col>
            <el-col :md="6" :xs="24" :sm="24">
                <div class="card-container left">
                    <el-card shadow="always">
                        <div style="font-weight: bold;margin-bottom: 10px;">😀欢迎您，{:$auth->nickname}！</div>
                        <el-alert type="success" :closable="false">【{:$parking->title}】，扫描二维码进入手机管理端。</el-alert>
                        <div class="pay">
                            <img :src="qrcode">
                        </div>
                    </el-card>
                </div>
                <div class="card-container left">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>停车场收益</div>
                            </div>
                        </template>
                        <el-row>
                            <el-col :span="24">
                                <div class="style-3">
                                    <div class="box">
                                        <div class="box-title">今日营业额</div>
                                        <div class="box-content">
                                            <div class="box-content-left">
                                                <div class="box-number-top">￥{{order.today}}</div>
                                                <div class="box-number-bottom">昨日营业额：￥{{order.yestoday}}</div>
                                            </div>
                                            <div class="icon bkcolor3" v-if="order.percentage<50">
                                                <i class="fa fa-arrow-down"></i>
                                            </div>
                                            <div class="icon bkcolor2" v-if="order.percentage>=50 && order.percentage<100">
                                                <i class="fa fa-arrow-down"></i>
                                            </div>
                                            <div class="icon bkcolor4" v-if="order.percentage>=100">
                                                <i class="fa fa-arrow-up"></i>
                                            </div>
                                        </div>
                                        <el-progress v-if="order.percentage<50" :percentage="order.percentage" color="#F56C6C"></el-progress>
                                        <el-progress v-if="order.percentage>=50 && order.percentage<100" :percentage="order.percentage" color="#E6A23C"></el-progress>
                                        <el-progress v-if="order.percentage>=100" :percentage="order.percentage" color="#45991b"></el-progress>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
                <div class="card-container left">
                    <el-card shadow="always">
                        <template #header>
                            <div class="header">
                                <div class="title"><i class="fa fa-caret-right"></i>收益占比</div>
                                <div class="right-filter">
                                    <el-button-group>
                                        <el-button @click="changePie('all')" size="small" :type="(pieFilter=='all')?'primary':''">全部</el-button>
                                        <el-button @click="changePie('today')" size="small" :type="(pieFilter=='today')?'primary':''">今日</el-button>
                                        <el-button @click="changePie('week')" size="small" :type="(pieFilter=='week')?'primary':''">本周</el-button>
                                        <el-button @click="changePie('month')" size="small" :type="(pieFilter=='month')?'primary':''">当月</el-button>
                                    </el-button-group>
                                </div>
                            </div>
                        </template>
                        <div class="chart2" id="chart2"></div>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    export default {
        data: {
            qrcode:Yunqi.config.baseUrl+'dashboard/get-qrcode',
            echarts: '',
            panel: [],
            line: {
                date: [],
                data: []
            },
            lineFilter:'day',
            table: [],
            tableFilter:'asc',
            merch:[],
            merchFilter:'before',
            pie: [],
            pieFilter:'today',
            order: {
                percentage: 0
            },
            bar:{
                title:[],
                name:[],
                data:[]
            },
            filterForm: {
                table: 'all',
                select: 'all'
            }
        },
        onLoad: function () {
            Yunqi.use('/assets/js/echarts.min.js').then(res => {
                this.echarts = res;
                this.parseData();
                this.parsePie();
                this.parseLine();
                this.parseMonth();
                this.parseMerch();
                this.parseRecords();
            });
        },
        methods: {
            parseData: function () {
                Yunqi.ajax.get('dashboard/index', {}).then(res => {
                    this.panel = res.panel;
                    this.order = res.order;
                });
            },
            parseMerch:function (){
                Yunqi.ajax.get('dashboard/merch', {type:this.merchFilter}).then(res => {
                    this.merch = res;
                });
            },
            parseRecords:function (){
                let rules_type=this.filterForm.select;
                Yunqi.ajax.get('dashboard/bar',{rules_type}).then(res=>{
                    this.bar=res;
                    this.chart3();
                });
            },
            parseMonth:function (){
                Yunqi.ajax.get('dashboard/month', {type:this.tableFilter}).then(res => {
                    this.table = res;
                });
            },
            parsePie: function () {
                Yunqi.ajax.get('dashboard/pie', {type:this.pieFilter}).then(res => {
                    this.pie = res;
                    this.chart2();
                });
            },
            parseLine: function () {
                Yunqi.ajax.get('dashboard/line', {type:this.lineFilter}).then(res => {
                    this.line = res;
                    this.chart1();
                });
            },
            chart1: function () {
                let mychart = this.echarts.init(document.getElementById('chart1'), 'walden');
                mychart.setOption({
                    title: {text: '临停收入金额（元）', left: 'center'},
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: false,
                        feature: {
                            magicType: {show: true, type: ['stack', 'tiled']},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.line.date
                    },
                    yAxis: {},
                    grid: [{
                        left: 40,
                        top: 40,
                        right: 0,
                        bottom: 30
                    }],
                    series: [{
                        name: '金额',
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {}
                        },
                        lineStyle: {
                            normal: {
                                width: 1.5
                            }
                        },
                        data: this.line.data
                    }]
                });
                window.addEventListener('resize', () => {
                    mychart.resize();
                });
            },
            chart2: function () {
                let mychart = this.echarts.init(document.getElementById('chart2'))
                mychart.setOption({
                    title: {text: '收益占比图', left: 'center'},
                    legend: {
                        orient: 'vertical',
                        bottom: 0,
                        left:0
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter:"{b}<br> {c} ({d}%)"
                    },
                    series: [{
                        type: 'pie',
                        data: this.pie,
                        radius: '60%',
                        label: {
                            normal: {
                                show: true,
                                formatter: "￥{c}",
                            }
                        }
                    }]
                });
                window.addEventListener('resize', () => {
                    mychart.resize();
                });
            },
            chart3:function (){
                let mychart = this.echarts.init(document.getElementById('chart3'))
                mychart.setOption({
                    title: {text: '最近10天出入统计',left: 'center'},
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    yAxis: {},
                    xAxis: {
                        data: this.bar.date
                    },
                    grid: [{
                        left: 100,
                        top: 40,
                        right: 40,
                        bottom:20
                    }],
                    series: [
                        {
                            type: 'bar',
                            name:this.bar.name[0],
                            data: this.bar.data[0]
                        },
                        {
                            type: 'bar',
                            name:this.bar.name[1],
                            data: this.bar.data[1]
                        }
                    ]
                });
                window.addEventListener('resize',()=>{
                    mychart.resize();
                });
            },
            changeMerch: function (type) {
                if (type) {
                    this.merchFilter = type;
                }
                this.parseMerch();
            },
            changeMonth: function (type) {
                if (type) {
                    this.tableFilter = type;
                }
                this.parseMonth();
            },
            changeLine:function (type){
                if (type) {
                    this.lineFilter = type;
                }
                this.parseLine();
            },
            changePie:function (type){
                if (type) {
                    this.pieFilter = type;
                }
                this.parsePie();
            }
        }
    }
</script>
<style>
    .pay {
        text-align: center;
        padding: 10px;
        padding-bottom: 0;
    }

    .pay img {
        width: 180px;
        height: 180px;
    }

    .card-container {
        margin-bottom: 10px;
    }

    .card-container.left {
        padding-right: 10px;
    }

    @media screen and (max-width: 992px) {
        .card-container.left {
            padding-right: 0;
        }
    }

    .card-container .el-card__header {
        padding: 8px 20px;
    }

    .card-container .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .card-container .el-card__header .title {
        font-weight: bold;
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .card-container .el-card__header .title i {
        font-size: 22px;
        color: var(--el-color-primary);
        margin-right: 8px;
    }

    .style-1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-radius: 6px;
        width: 87%;
        margin: 0 auto 10px;
        color: #fff;
    }

    .style-1 i {
        font-size: 42px;
        color: #fff;
    }

    .style-3 {
        padding: 10px;
        width: 87%;
        margin: 0 auto;
        text-align: center;
    }

    .style-3 .box-title {
        text-align: left;
    }

    .style-3 .box {
        height: 190px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .style-3 .box-content-left {
        text-align: left;
    }

    .style-3 .box-number-top {
        font-size: 26px;
    }

    .style-3 .box-number-bottom {
        color: darkgrey;
    }

    .style-3 .box-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .style-3 .icon {
        color: #fff;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 32px;
    }

    .box .box-title {
        font-size: 18px;
    }

    .bkcolor1 {
        background: linear-gradient(to right, var(--el-color-primary-light-3), var(--el-color-primary));
    }

    .bkcolor2 {
        background: linear-gradient(to right, var(--el-color-warning-light-3), var(--el-color-warning));
    }

    .bkcolor3 {
        background: linear-gradient(to right, var(--el-color-danger-light-3), var(--el-color-danger));
    }

    .bkcolor4 {
        background: linear-gradient(to right, var(--el-color-success-light-3), var(--el-color-success));
    }

    .chart1 {
        width: 100%;
        height: 310px;
    }

    .chart2 {
        width: 100%;
        margin: 0 auto;
        height: 600px;
    }

    .chart3 {
        width: 100%;
        height: 400px;
    }
</style>